title = "产品详情页"
url = '/:slug|[a-z0-9\-]+-p-\d+.html$'
title = '产品内容页模板'
layout = 'default-y'
==
use Jason\Ccshop\Components\Catalog;
use Jason\Ccshop\Models\Promotion;
function onStart(){

	$slugArr = explode('-', str_replace('.html', '', $this->param('slug')));
	$id = array_pop($slugArr);
	$condition = ['id'=>$id];
	$product = App::make('Jason\Ccshop\Controllers\Products')->getProduct($condition);
	if ($product) {
        //若产品特色图片小于5个，使用产品内容里面的图片作为特产图片
        //$featureImageCount = count($product['feature_image']);
        //if($featureImageCount < 5){
          //  preg_match_all('/<\s*img\s+[^>]*?src\s*=\s*(\'|\")(.*?)\\1[^>]*?\/?\s*>/i',$product['content'], $match);
            //$contentImages = isset($match[2]) ? $match[2] : [];
            //if(!empty($contentImages)){
              //  foreach($contentImages as $contentImage){
                //    if(stripos($contentImage,'.png')===false){
                 //       $product['feature_image'][] = ['title' => '', 'path' => $contentImage];
                   // }
                  //  if(count($product['feature_image'])==5){
                   //      break;
                  //  }
              //  }
          //  }
      //  }
		$this['product'] = $product;
	} else {
		return redirect('/404');
	}

     //促销产品
    $this['promotionLabel'] = '';
    //现在促销的
    $promotion = Promotion::where('name', 'christmas_now')->first();
    $now = time();
    if( $promotion && strtotime($promotion->from_date) < $now && strtotime($promotion->to_date) > $now){
        $promotions = (new Catalog)->getProductsByPromotionName('christmas_now'); 
        foreach($promotions as $promo){
           if($product['id']==$promo['id']){
             $this['promotionLabel'] = 'proNow';
             break;
          }
        }
    }

   //下一期促销的
    //if(!$this['promotionLabel']){
    //   $promotion = Promotion::where('name', 'christmas_next')->first();
    //   if($promotion && strtotime($promotion->from_date) > $now){
    //    $promotions = (new Catalog)->getProductsByPromotionName('christmas_next'); 
    //    foreach($promotions as $promo){
    //       if($product['id']==$promo['id']){
    //         $this['promotionLabel'] = 'proNext';
    //         break;
    //      }
    //    }
   // }     
  // }

    //dd($promotions);
    //dd($this['promotionLabel']);
    if($this['promotionLabel']){
     $this['from_date'] = strtotime($promotion->from_date);
     $this['to_date']  = strtotime($promotion->to_date);
     $this['now_date']  = $now;
    }
}
==
{# GA代码4_动态赋值 #}
{% put fb_standard_event %}
    fbq('track', 'ViewContent', {
        content_type:'product',
        content_ids:"{{ product.id }}",
        content_name: "{{ product.name }}",
        value: {{ product.price|ratePrice }},
        currency: 'JPY'
    });
{% endput %}
{% set reviews = catalog.getReviews(product.id) %}
<div class="product_cont" data-pro-category-id="{{ product.cids[0] }}">


	<div class="product_swiperBox">
		<div class="swiper-container product_swiper">
		    <div class="swiper-wrapper">
		    {% for key, img in product.feature_image %}
		        <div class="swiper-slide"><a href="#image{{ loop.index }}"><img src="{{ img.path }}" alt=""></a></div>
	        {% endfor %}

		    </div>
		    <!--  -->
		    <div class="swiper-pagination swiper-pagination-black"></div>
		    <!--  -->
		    <div class="swiper-button-prev"></div>
		    <div class="swiper-button-next"></div>
		</div>
	</div>
        <div id="promotionNow" style="display: none">
                {% if promotionLabel %}
                <h4 class="starttime">{{ from_date |date("Y/m/d H:i:s")  }}</h4>
                <h4 class="endtime">{{ to_date |date("Y/m/d H:i:s")  }}</h4>
                <h4 class="nowtime">{{ now_date |date("Y/m/d H:i:s")  }}</h4>
                {% endif %}  
        </div>
	<form action="#" method="post" id="product_addtocart_form">

		<div class="productPriceBox">
			<p class="title">{{ product.name }}</p>
			<div class="price" style="position: relative;"><span class="colorBlue2">{{ product.price|formatPrice }}</span>（税込）
                        {% if promotionLabel=='proNow' %}
                            <div style="color: red"><span style="font-size: 12px;">残り時間：</span>
                            <span id="date-1" style="font-size: 12px;"></span></div>     
                        {% endif %}
				<s style="color: #999;font-weight: 500;">{{ product.list_price |formatPrice }} （税込）</s> 
				<br>
                <!--  -->
                <div class="availability {% if product.status == 'instock' %}in-stock{% else %}out-of-stock{% endif %}">
                    <span>{{ ('jason.ccshop::lang.product.status.' ~ product.status)|trans }}</span>

                </div>
			</div>
            <p style="font-size: 14px;overflow: hidden;">
                <span class="fl listPorint_" style="padding: 0 10px;">ポイント: {{ getProductPoint(product.id) }}</span>
                <span class="fl listPorint_ bgBlue2" style="margin-left: 15px;padding: 0 10px;">{{ product.discount }} OFF</span>
            </p>
			<div class="sizeChange">
				{% for option in product.options %}

					<div class="btnGhost _addInput_unit">


		            	<span>{{ option.name }}:  <span id="name-text"></span> </span>

		              	<div class="proRadioWrap input-color" id="">
		              		{% if option.values is iterable %}
		              			{% for val in option.values %}
		              				<label class="">
				                        <input type="radio" name="ProductOption[{{ option.id }}]" class="radio_common_icon" value="{{val.id}}">

				                        {% if val.thumb.path %}
				                            <span style="display:block;">
				                            	<img width="40" src="{{ val.thumb.path }}" alt="{{val.name}}" title="{{val.name}}" style="display:block;">
				                          </span>
				                        {% else %}
				                        <span>{{val.name}}</span>
				                        {% endif %}
				                    </label>
		              			{% endfor %}
		              		{% endif  %}

		                 </div>
		        	</div>

				{% endfor %}


	            <div class="_decision_number_box">
					<div class="_size_head _head"><span>数量</span></div>
					<div class="_ul_box _number_ul_box">
				      	<div class="add-to-cart fl">
				          	<div class="custom pull-left">
				              	<button onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) &amp;&amp; qty > 1 ) result.value--;return false;" class="reduced items-count" type="button"><i class="">-</i></button>
				              	<input type="text" class="input-text qty" title="Qty" value="1" maxlength="12" id="qty" name="qty">
				              	<button onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;" class="increase items-count" type="button"><i class="">+</i></button>
				          	</div>
				      	</div>
                        {% if product.custom_fields['wish_total'] %}
                            <span class="wishNum fl">{{  product.custom_fields['wish_total']}}</span>
                        {% endif %}
				  	</div>
				</div>
                <p class="mt10 hide" style="color: #ef98a8;"><b>※初注文500円OFF  ≥5点送料無料</b></p>
				<div class="add-to-cartBox">
					{% if product.status == 'instock' %}
					 <input type="hidden" name="product" id="pid" value="{{ product.id }}">


					<p><button  class="addToCartBtn blueBtn1" type="button" id="falseAddToCartBtn">
                        <img src="{{ 'assets/img/nav/mybag_w.png'|theme }}" style="display: inline-block;width: 19px;height: auto;margin-right: 5px;" alt="">カートに入れる
                    </button></p>
                    <button id="TrueAddToCartBtn" class="addToCartBtn blueBtn1" data-request-data="flash:1" data-request="onAddToCart" data-request-data="product:{{ product.id }}" data-request-loading="#loading" data-request-redirect="{{ ''|page }}" style="display: none;"></button>


					{% else %}
					<p><button class="addToCartBtn blueBtn1" disabled><img src="{{ 'assets/img/nav/mybag_w.png'|theme }}" style="display: inline-block;width: 19px;height: auto;margin-right: 5px;" alt="">在庫切れ</button></p>
					{% endif %}
					<p>
					<button class="wishlistBtn blueBtn2"
					data-request="onAddToWishlist"
                    data-request-data="key: {{ product.id }}"
					>
						お気に入りに追加する
					</button></p>
				</div>
			</div>

		</div>
	</form>
	<div id="productReviews"  style="">
		 <ul class="box_list text_switch">
            <li class="flatTab_navList flatTab_navList_box box_list_main active">
                <a class="flatTab_navList_link" href="javascript:;">
                    <div class="flatTab_navList_inner">商品詳細</div>
                </a>
            </li>
            <li class="flatTab_navList flatTab_navList_box box_list_main">
                <a class="flatTab_navList_link" href="javascript:;">
                    <div class="flatTab_navList_inner">レビュー（{{ reviews.total }}）</div>
                </a>
            </li>
        </ul>
        <div class="flatTab_contents">
			<div class="productReviewsCont" style="display: block;">
				{{ product.content|raw }}
			</div>
			<div class="productReviewsCont">
                <div class="reviewArea">
                    <div class="reviewArea_header clearfix">
                        <div class="fl">
                            総合評価
                            <span class="avg">
                                <span class="reviewStar size2 star{{ reviews.rating_stat.avg | round }} mr10" style="top:0;"></span>
                            </span>
                        </div>
                        <div class="fr cnt">
                            <span class="fwb">({{ reviews.total }})</span>
                            レビュー
                        </div>
                    </div>
                    <div class="_tabArea">
                        <ul class="reviewFlatTab">
                            <li class="reviewFlatTab_item _tab _selected">
                                <a href="#reviewComment" class="reviewFlatTab_itemInner">コメント</a>
                            </li>
                            <li class="reviewFlatTab_item _tab">
                                <a href="#reviewSize" class="reviewFlatTab_itemInner">レビューを書く</a>
                            </li>
                        </ul>
                        <div class="_contents _selected pt10" id="reviewComment">
                            <ul class="list_product_review">
                                {% for key, review in reviews %}
                                <li class="item clear">
                                    <div class="pingl">
                                        <p>
                                            <img src="{{ 'assets/img/defaultUser.png'|theme }}" style="width:20%;"> 
                                            {{ getReviewsName(review.name) }}
                                        </p>
                                        <p>{{ review.created_at | date("m/d/Y") }}</p>
                                    </div>
                                    <div class="pingr">
                                        <!-- <p><span class="fwb">{{ review.title }}！</span></p> -->
                                        <p><span class="reviewStar size1 star{{ review.rating | round }}"></span></p>
                                        <p>{{ review.content }}</p>
                                        <p class="reviewImgBox">
                                        {% for  key, image in review.images %}
                                            {% if key < 3 %}
                                                <img class="reviewImg_img" src="{{ image.getPath(200,200,{'mode':'crop'}) }}" alt="{{ review.title }}" style="width:20%;display: inline-block;margin-right:2%;">
                                            {% endif %}
                                        {% endfor %}
                                        </p>
                                    </div>
                                </li>
                                {% endfor %}
                            </ul>
                            {{ reviews.fragment('reviews').render()|raw }}
                        </div>
                        {{ form_ajax('onPushReview') }}
                        <input type="hidden" name="product" value="{{ product.id }}">
                        <input type="hidden" name="name" value="{{ user.name }}">
                        <input type="hidden" name="title" value="レビュー">
                        <input type="hidden" class="input-text required-entry" value="4" id="rating_rank" name="rating">
                        <div class="_contents reviewDataTabContents" id="reviewSize">
                            <div class="reviewContentsTitle">
                                この商品はいかがでしたか？
                                <span id="score">
                                    <a name="1" class="reviewStar size4"></a>
                                    <a name="2" class="reviewStar size4"></a>
                                    <a name="3" class="reviewStar size4"></a>
                                    <a name="4" class="reviewStar size4"></a>
                                    <a name="5" class="reviewStar size4"></a>
                                </span>
                            </div>
                            <div class="submitReview">
                                <label class="ipass">商品レビュー本文<span class="force_color">*</span></label>
                                <textarea class="required-entry" rows="3" cols="5" id="review_field" name="content"></textarea>
                                {% if user.email %}
                                <button class="button_decide mt10" title="Submit Review" type="submit">
                                    <span class="button_txt">レビューを投稿する</span>
                                </button>
                                {% else %}
                                <a class="button_decide mt10" href="{{ 'account/login'|page }}" style="background:#8c8c8c;border:1px solid #8c8c8c;">
                                    <span class="button_txt">登録する後で、レビューを投稿する</span>
                                </a>
                                {% endif %}
                            </div>
                        </div>
                        {{ form_close() }}
                    </div>
                </div>
            </div>
        </div>
	</div>


	<div class="productRecommen">

		{% partial 'catalog/product-recommend' pid=product.id code="product-related" %}
		{% partial 'catalog/product-history' %}


	</div>
    <div class="mask_note" style="display: none;">
        <p>サイズとカラーを選んでください</p>
    </div>
</div>

<div id="bagImg_box_ev"></div>
<style type="text/css">
    #bagImg_box_ev{position:fixed;left:0;top:0;width:100%;height:100%;z-index:999;display:none}
    #bagImg_box_ev .bagImg_box_swiper{width:100%;height:100%}
    #bagImg_box_ev .swiper-wrapper .swiper-slide>div{height:100%;width:100%;background:#000;display:-webkit-flex;-webkit-align-items:center}
    #bagImg_box_ev .swiper-wrapper .swiper-slide>div img{width:100%}
    #bagImg_box_ev .swiper-pagination-bullet{background:#fff!important}
</style>
{% put scripts %}
<script>
$(function(){
    /*pingjia datu big img*/
    $("#bagImg_box_ev").height($(window).height());
    var bagImg_box_swiper = null;
    $(".list_product_review").find(".reviewImgBox .reviewImg_img").click(function(){
        var idx = $(this).index();
        var swipersliderHtml = "";
        $("#bagImg_box_ev").show();
        // $("._conver").show();
        $(this).parent().find(".reviewImg_img").each(function(i,item){
            var imgSrc = item.src;
            swipersliderHtml  += `<div class="swiper-slide">\
                            <div><img src="${imgSrc}"></div>\
                        </div>`
        })
        var swiperBoxHtml = `<div class="swiper-container bagImg_box_swiper">\
                            <div class="swiper-wrapper">${swipersliderHtml}</div>\
                            <div class="swiper-pagination"></div>\
                        </div>`;
        $("#bagImg_box_ev").html(swiperBoxHtml);
        bagImg_box_swiper = new Swiper ('.bagImg_box_swiper', {
            direction: 'horizontal',
            loop: false,
            pagination: '.swiper-pagination',
        })
        bagImg_box_swiper.slideTo(idx);
        $("#bagImg_box_ev").click(function(){
            $("#bagImg_box_ev").hide();
            // $("._conver").hide();
            bagImg_box_swiper = null;
            $("#bagImg_box_ev").find(".bagImg_box_swiper").remove()
        })
    })
    /**/
    $("#productReviews").find("table").each(function(i,item){
        $(item).removeAttr("style").attr("width","100%")
    })
    /*xianshi fenlei*/
    var dataCategoryId = $(".product_cont").attr("data-pro-category-id")
    $("#topMenu").find(".mune_").next(".Content").find("ul li").each(function(i,item){
        var id = $(item).attr("data-id");
        if(id == dataCategoryId){
            $(item).parents(".Content").css("display","block").prev().find(".arrow").addClass("bottom");
            return false;
        }
    });

        $("#promotionNow").each(function(index){
         initmakeNow(this)
     });

    // $("#promotionNext").each(function(index){
    //     initmakeNext(this)
    //  });
    function initmakeNow(that){ 
        var starttime = $(that).find(".starttime").text();        
        var endtime = $(that).find(".endtime").text();
        var nowtime = $(that).find(".nowtime").text();
        startdjs();
        function startdjs(){
            starttime = new Date(starttime).getTime();
            nowtime = new Date(nowtime).getTime();
            var chastart = starttime-nowtime;
            var startinterval = setInterval(function(){
                chastart=chastart-1000;
                var d = Math.floor(chastart/1000/60/60/24);         
                var h = Math.floor(chastart/1000/60/60%24);
                var i = Math.floor(chastart/1000/60%60);
                var s = Math.floor(chastart/1000%60);  
                if(d<=0&&h<=0&&i<=0&&s<=0){
                    clearInterval(startinterval);
                    enddjs();
                }else{
                    $("#date-1").html(d+":"+h+":"+i+":"+s);
                }
            }, 1000);       
        }
        function enddjs(){
            endtime = new Date(endtime).getTime();
            nowtime = new Date(nowtime).getTime();
            var chaend = endtime-nowtime;            
            var endinterval = setInterval(function(){
                chaend=chaend-1000;
                var d = Math.floor(chaend/1000/60/60/24);           
                var h = Math.floor(chaend/1000/60/60%24);
                var i = Math.floor(chaend/1000/60%60);
                var s = Math.floor(chaend/1000%60);
                if(d<=0&&h<=0&&i<=0&&s<=0){
                    clearInterval(endinterval)
                }else{
                    $("#date-1").html(d+":"+h+":"+i+":"+s);
                }
            }, 1000);       
        }
    }

        function initmakeNext(that){ 
        var starttime = $(that).find(".starttime").text();        
        var endtime = $(that).find(".endtime").text();
        var nowtime = $(that).find(".nowtime").text();
        startdjs();
        function startdjs(){
            starttime = new Date(starttime).getTime();
            nowtime = new Date(nowtime).getTime();
            var chastart = starttime-nowtime;
            var startinterval = setInterval(function(){
                chastart=chastart-1000;
                var d = Math.floor(chastart/1000/60/60/24);         
                var h = Math.floor(chastart/1000/60/60%24);
                var i = Math.floor(chastart/1000/60%60);
                var s = Math.floor(chastart/1000%60);  
                if(d<=0&&h<=0&&i<=0&&s<=0){
                    clearInterval(startinterval);
                    enddjs();
                }else{
                    $("#date-2").html(d+":"+h+":"+i+":"+s);
                }
            }, 1000);       
        }
        function enddjs(){
            endtime = new Date(endtime).getTime();
            nowtime = new Date(nowtime).getTime();
            var chaend = endtime-nowtime;            
            var endinterval = setInterval(function(){
                chaend=chaend-1000;
                var d = Math.floor(chaend/1000/60/60/24);           
                var h = Math.floor(chaend/1000/60/60%24);
                var i = Math.floor(chaend/1000/60%60);
                var s = Math.floor(chaend/1000%60);
                if(d<=0&&h<=0&&i<=0&&s<=0){
                    clearInterval(endinterval)
                }else{
                    $("#date-2").html(d+":"+h+":"+i+":"+s);
                }
            }, 1000);       
        }
    }
   



});
    // Star rating
    var GradList = document.getElementById("score").getElementsByTagName("a");
    for(var i=0;i < GradList.length;i++){
        GradList[i].onmouseover = function(){
            for(var Qi=0;Qi<GradList.length;Qi++){
                GradList[Qi].className = 'reviewStar size4';
            }
            for(var Qii=0;Qii<this.name;Qii++){
                GradList[Qii].className = 'reviewStar size4 star1';
            }
            $("#rating_rank").val(Qii); 
        }
    }
</script>
{% endput %}
<script type="text/javascript">
var google_tag_params = {
    ecomm_prodid: {{product.id}},
    ecomm_pagetype: "product",
    ecomm_totalvalue: {{product.price|ratePrice}}
};
</script>
